<script setup>

import Header from "@/components/header/Header.vue";
import {requestNavigationList, requestNavigationTypeList} from "@/api/navigation/navigationApi";
//
// const data = [
//   {
//     id: 1,
//     name: '设计'
//   },
//   {
//     id: 2,
//     name: '前端'
//   },
//   {
//     id: 3,
//     name: '后端'
//   },
//   {
//     id: 4,
//     name: 'AI'
//   }
// ]

const typeList = ref([])
const getTypeList = () => {
  requestNavigationTypeList().then(res => {
    typeList.value = res.data
  })
}

const navList = ref([])
const getNavList = () => {
  requestNavigationList().then(res => {
    navList.value = res.data
  })
}

onMounted(() => {
  getTypeList()
  getNavList()

})

const anchorRef = ref(null);
const scrollTo = (href) => {
  anchorRef.value?.scrollTo(href);
};

const openHref = (url) => {
  window.open(url)
}
</script>

<template>
  <Header :page="true"></Header>
  <!--  <div v-for="(item) in data">-->
  <!--    {{ item }}-->
  <!--  </div>-->


  <div class="content">
    <n-anchor :type="'rail'" :show-rail="true" :show-background="true" class="left"
              offset-target=".right" :bound="24">
      <n-anchor-link v-for="(item) in typeList" :title="item.name" :key="item.id"
                     :href="'#'+item.id" class="navigation_anchor"/>
    </n-anchor>


    <div class="right">
      <n-card v-for="(item) in navList" :id="item.type" :key="item.id" :title="item.typeName">
        <n-grid x-gap="12" :cols="4">
          <n-gi v-for="navItem in item.children" :key="navItem.id">

            <div class="navigation_item hvr-sweep-to-right hvr-bob" @click="openHref(navItem.href)">
              <n-image
                  width="64"
                  height="64"
                  :src="navItem.icon"
                  :preview-disabled="true"
              />
              <div class="right_content">
                <h3>{{ navItem.name }}</h3>
                <p class="desc">{{ navItem.desc }}</p>
              </div>
            </div>


          </n-gi>
        </n-grid>

      </n-card>
      <!--      <div id="设计" style="height: 1000px;background: black"></div>-->
      <!--      <div id="前端" style="height: 1000px;background: red"></div>-->
      <!--      <div id="后端" style="height: 1000px;background: red"></div>-->
      <!--      <div id="AI" style="height: 1000px;background: yellow"></div>-->
    </div>

  </div>


</template>

<style scoped lang="less">
@import url('@/style/variable');

.content {
  display: flex;

  .left {
    width: 120px;
    height: 100%;
  }

  .right {
    flex: 1;
    height: @content-height;
    overflow: auto;

    div {
      //margin: 32px;
    }
  }

  .navigation_item {
    cursor: pointer;
    display: flex;
    border: 1px solid #ccc;
    padding: 16px;
    align-items: center;
    height: 100px;


    //（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)
    .right_content {
      padding-left: 16px;
    }

    .desc {
      word-break: break-all; //单词内的断句
      overflow: hidden; //溢出隐藏
      text-overflow: ellipsis; //省略号
      display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
      -webkit-box-orient: vertical; //设置弹性盒子的子元素的排列方式
      -webkit-line-clamp: 2; //设置显示文本的行数
    }

    //&:hover {
    //  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5);
    //}
  }
}


</style>

<style lang="less">
.navigation_anchor > a {
  padding: 16px 0;
}


</style>